<template>
    <div class="guess">
     <dl>
       <dt style="font-size: 20px">猜你喜欢</dt>
       <hr />
       <router-link to="/Detail">
       <dd v-for="con in conten">
        <div class="guess1">
          <img :src="con.img" style="height: 100%" width="25%"/>
          <ul>
            <li><span class="names">{{con.name}}</span><br/></li>
            <li><span class="zi">{{con.tui}}</span></li>
            <li>
              <div class="guess2">
                <div>
                  <span class="news">{{con.new}}</span>
                  <span>元</span>
                </div>
                <div class="olds">门市价:{{con.old}}元</div>
                <div class="Salesvolumes">已售{{con.Salesvolume}}</div>
              </div>
            </li>
          </ul>
        </div>
         <hr />
       </dd>
       </router-link>

     </dl>
    </div>
</template>

<script>
    export default {
        name: "Guess.vue",
      mounted(){
          console.log(this.$route.params.id)
      },
      props:{
          conten:Array
      }
    }
</script>

<style lang="stylus" scoped>
  .guess
    margin-top .5rem
  .guess1
    height .6rem
    width 100%
    display flex
  .names
    font-size 0.15rem
    display block
    margin-top 0px
  .zi
    width 90%
    height 10px
    font-size .1rem
    display block
    margin-top -.25rem
    overflow:hidden
  .guess2
    display block
    display flex
    height .13rem
    width 100%
    font-size 10px
    margin-top .2rem
  .news
    color blue
    font-size .17rem
  .olds
    margin-top .055rem
    margin-left .03rem
  .Salesvolumes
    margin-top .055rem
    margin-left .75rem
  li
    margin-left .1rem
  img
    margin-left .1rem
</style>
